<template>
	<view class="react">
		<view class="react-title">
			<text>{{texts}}</text>
			<view  class="right"  style="float: right; display: flex; flex-direction: row; align-items: baseline;">
				<view style="color: #C1C1C1; font-weight: 400; font-size: 24rpx;"
				@click="toPage('/pages/shop/dealing?id=' + id)">更多记录</view> 
					<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
			 </view>
		</view>
		<view class="item" v-for="(item,i) in list" :key="i">
			<view class="info">
				<u-avatar size="32" :src="item.to_portrait"></u-avatar>
				<view class="left">
					<view class="title">
						{{item.to_nickname}}
					</view>
					<view class="num">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="right">
				<view class="title">
					{{item.type|status}}{{item.money>0?'￥':''}}{{item.money}}
				</view>
			</view>
		</view>
			<Empty v-if="list.length==0" :type='3' text="暂无记录"></Empty>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from '@/components/Empty.vue'
	export default {
		mixins: [mixin],
		components:{Empty},
		props: {
			id:{},
			texts:{
				type:String,
				default:()=>{
					return '交易记录'
				}
			},
		},
		data() {
			return {
				list:""
			};
		},
		created() {
			this.goodsLog()
		},
		filters:{
			status(e){
				switch (e){
					case 1:
						return '买入'
						break;
					case 8:
						return '挂售'
						break;
					default:
						return ''
						break;
				}
			},
			},
		methods:{
			async goodsLog(){
				let res = await this.$http({
					url:this.$api.goodsLog,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id:this.id,
						page:1,
						page_size:5
					}
				})
				if(res.code==200){
					this.list = res.data.data;
					// console.log(this.list);
				}
			},
		}
	}
</script>

<style lang="scss" >
		.react{
				background: #FFF;
				// padding: 22rpx 28rpx;
				min-height: 400rpx;
				// margin: 30rpx;
				border-radius: 8rpx;
				&-title{
					font-size: 32rpx;
					font-weight: 600;
					color: #16172F;
					line-height: 40rpx;
				}
				.tops{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						font-size: 24rpx;
						font-weight: 400;
						color: #C1C1C1;
						padding: 4rpx 14rpx;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
					}
					.ico{width: 24rpx;height: 24rpx; margin-left: 10rpx;}
				}
				.info {
					display: flex;
					align-items: center;
				}
				.author{
					display: flex;
					align-items: center;
					padding-bottom:18rpx;
					margin-top: 18rpx;
					.user{
						margin-left: 16rpx;
						.des{
							font-size: 24rpx;
						}
						.name,.des{
							font-size: 28rpx;
							font-weight: 600;
							color: #999999;
							line-height: 40rpx;
						}
					}
				}
				.work_goods_info{
					.work_title{
						font-size: 24rpx;
						font-weight: 600;
						color: #999999;
						::v-deep image{
							max-width: 100%!important;
						}
					}
				}
				.item{
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					padding: 26rpx 0;
				.left{
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					margin-left: 16rpx;
				}
				.right{
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: flex-end;
				}
				.title{
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #16172F;
					line-height: 40rpx;
					margin: 5rpx 0;
				}
				.num{margin: 5rpx 0;
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					// font-weight: 600;
					color: #8C93AA;
					line-height: 32rpx;
				}
				}
			
			}
</style>